<template>
  <div id="download-wrap">
    <el-dialog title="数据列表" :visible.sync="isOpen.isShow" width="620px">
      <div class="download-wrap__content">
        <el-table :data="dataList" style="width: 100%;" v-if="showTable">
          <el-table-column prop="createTime" label="日期" width="120">
          </el-table-column>
          <el-table-column prop="fileName" label="文件名"> </el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button
                :class="
                  exLoading[`isLoading${scope.$index}`] ? 'isLoading' : ''
                "
                @click="handleClick(scope.row, scope.$index)"
                type="text"
                size="small"
                :disabled="exLoading[`isLoading${scope.$index}`]"
                >下载</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="success" @click="isOpen.isShow = false"
          >返回</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { downFiles } from '@/api/shareBackFlow/business'
export default {
  props: ['isOpen', 'dataList'],
  data() {
    return {
      dialogVisible: true,
      exLoading: {},
      showTable: false
    }
  },
  watch: {
    dataList: {
      handler(newV, oldV) {
        if (newV) {
          let dataLen = newV.length
          if (dataLen > 0) {
            for (let i = 0; i < dataLen; i++) {
              this.exLoading[`isLoading${i}`] = false
            }
          }
          this.showTable = true
        }
      },
      deep: true
    }
  },
  methods: {
    handleClick(val, index) {
      this.setLoading(index, true)
      let lastIndex = val.fileName.lastIndexOf('.')
      let fileName = val.fileName.slice(0, lastIndex)
      let params = { id: val.id }
      let checked = 'noTime'
      downFiles(
        params,
        fileName,
        checked,
        (index) => {
          this.setLoading(index, false)
        },
        (index) => {
          this.setLoading(index, false)
        },
        index
      )
    },
    setLoading(index, flog) {
      let obj = { ...this.exLoading }
      obj[`isLoading${index}`] = flog
      this.exLoading = obj
    }
  }
}
</script>

<style lang="less">
#download-wrap {
  .el-dialog__body {
    padding: 15px 25px !important;
  }
  .el-table::before {
    height: 0;
  }
  button.isLoading span {
    color: gray;
  }
  .download-wrap__content {
    height: 400px;
    overflow-y: auto;
  }
}
</style>
